<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_类的基本知识</title>
</head>

<body>
    <script type="text/javascript">
        // 1。类的基本知识
        // 创建一个Person类
        class Person {
            // 构造方法
            constructor(name, age) {
                // 构造器中的this是谁？——类的实例对象——p1、p2等
                this.name = name;
                this.age = age;
            }
            // 一般方法
            say() {
                // say方法放在了哪里？——Person类的原型对象上，供实例对象共享使用
                // 通过Person实例调用say时，say中的this就是Person实例对象（p1、p2等）
                console.log(`我是${this.name}，今年${this.age}岁`);
            }
        }
        // // 创建一个Person的实例对象
        // const p1 = new Person('张三', 18);
        // const p2 = new Person('李四', 19);
        // console.log(p1);
        // console.log(p2);
        // p1.say();
        // p2.say();
        // 2.继承
        // 创建一个Student类，继承于Person类
        class Student extends Person {
            constructor(name, age, grade) {
                // 调用父类的构造方法
                super(name, age);
                this.grade = grade;
                this.school = '清华大学';
            }
            // 重写父类继承过来的say方法
            say() {
                console.log(`我是${this.name}，今年${this.age}岁，读${this.grade}`);
            }
            // 添加新的方法
            study() {
                // study方法放在了哪里？——Student类的原型对象上，供实例对象共享使用
                // 通过Student实例调用study时，study中的this就是Student实例对象（s1等）
                console.log('我在学习');
            }
        }
        // // 创建一个Student的实例对象
        // const s1 = new Student('王五', 20, '大三');
        // console.log(s1);
        // s1.say();
        // s1.study();

        /**
         * 总结：
         *  1.类中的构造器不是必须写的，要对实例进行一些初始化操作，
         *    如添加指定的属性时才写;
         *  2.如果A类继承了B类，且A类中有构造器，那么A类构造器中的super是必须调用的
         *  3.类中所定义的方法，都是放在了类的原型对象上，供实例使用
         */

        class Car {
            constructor(name, price) {
                this.name = name;
                this.price = price;
            }
            // 类中可以直接写赋值语句，如下代码的含义是：
            //    给Car的实例上添加一个wheel属性，值为4
            wheel = 4;
            static color = 'red'; // 静态属性(加在了原型上，只能通过类名访问)
        }
        const c1 = new Car('奔驰', 200);
        console.log(c1);
        console.log(Car.color);
    </script>
</body>

</html>